<template>
    <div>
        <h2>房号显示列表</h2>
        <input type="button" value="新增" class="btn btn-primary" @click="add">
        <input type="button" value="批量删除" class="btn btn-danger" @click="del">
        <input type="button" value="批量上架" class="btn btn-info" @click="upd(0)">

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll">
                    </td>
                    <td>房型名称</td>
                    <td>房间号码</td>
                    <td>房间描述</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in aa.data" :key="item.Id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkOne">
                    </td>
                    <td>{{item.TypeId}}</td>
                    <td>{{item.NumName}}</td>
                    <td>{{item.Desc}}</td>
                    <td>{{item.State==0?"上架":"下架"}}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>


    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import moment from 'moment';


//-------------显示---------------
onMounted(()=>{
    getshow();
})
let aa:any=reactive({
    data:[]
})
const getshow=()=>{
    axios({
        method:'get',
        url:'/api/Week3/ShowNum'
    })
    .then(res=>{
        console.log(res);
        aa.data=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

//--------------全选全不选---------
//赋初始值
let checked=ref(false);
let ids=ref([]);
//判断
const checkAll=()=>{
    checked.value=!checked.value;
    if(checked.value==true){
        ids.value=aa.data.map((item:any)=>{
            return item.Id;
        })
    }
    else{
        ids.value=[];
    }
}
//反选
const checkOne=()=>{
    if(ids.value.length==aa.data.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//---------批量删除---------
const del=()=>{
    if(ids.value.length==0){
        alert('至少选择一项');
        return;
    }
    if(confirm('确认删除吗')){
        axios({
            method:'delete',
            url:'/api/Week3/DelNum',
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('成功');
                getshow();
                checked.value=false;
            }
            else{
                alert('失败');
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

//---------批量上架-------
const upd=(state:any)=>{
    if(ids.value.length==0){
        alert('请至少选择一项');
        return;
    }
    if(confirm('确认修改吗')){
        axios({
            method:'put',
            url:'/api/Week3/UpdStateAll',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('成功');
                getshow();
                checked.value=false;
                ids.value=[];
            }
            else{
                alert('失败');
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}



const add=()=>{
    router.push('/hNumAdd')
}
</script>

<style scoped>
input[type="button"]{
    margin-right: 10px;
}

</style>